<template>
  <el-row>
    <el-col :span="12"><div class="c1">1</div></el-col>
    <el-col :span="12"><div class="c1">2</div></el-col>
  </el-row>
  <el-row :gutter="10"><!--  gutter设置间距   span设置当前列占多少分栏  -->
    <el-col :span="8"><div class="c1">1</div></el-col>
    <el-col :span="8"><div class="c1">2</div></el-col>
    <el-col :span="8"><div class="c1">3</div></el-col>
  </el-row>
  <h1>两等分,并居中</h1>
  <div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-col :span="12"><div class="c1">1</div></el-col>
      <el-col :span="12"><div class="c1">2</div></el-col>
    </el-row>
  </div>
  <h1>3部分,1:2:3  并居中</h1>
  <div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-col :span="4"><div class="c1">1</div></el-col>
      <el-col :span="8"><div class="c1">2</div></el-col>
      <el-col :span="12"><div class="c1">3</div></el-col>
    </el-row>
  </div>
  <h1>栅格嵌套</h1>
  <el-row>
    <el-col :span="12"><div class="c1">1</div></el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="8"><div class="c1">2-1</div></el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="12"><div class="c1">2-2-1</div></el-col>
            <el-col :span="12"><div class="c1">2-2-2</div></el-col>
          </el-row>
        </el-col>
        <el-col :span="8"><div class="c1">2-3</div></el-col>
      </el-row>
    </el-col>
  </el-row>
<h1>显示图片</h1>
<el-row :gutter="10">
  <el-col :span="6" v-for="item in 4">
    <el-card>
      <img src="b.jpg" style="width: 100%">
      <p>这是一个不知名的美女</p>
      <div style="color: #666;font-size: 12px">
        <span>身高:180cm</span>
        <span style="float: right">体重:280kg</span>
      </div>
    </el-card>
  </el-col>
</el-row>
</template>
<script></script>
<style scoped>
  .c1{border: 1px solid red; border-radius: 5px}
</style>